// ===============================
// ServiceConsulting 页面样式
// ===============================

.service-consulting {
	min-height: 100vh;
	background: var(--theme-content-bg);
	color: var(--theme-content-text);
	padding: 80px 0;

	.hero {
		text-align: center;

		.hero-content {
			max-width: 800px;
			margin: 0 auto;

			h1 {
				font-size: 3rem;
				font-weight: 700;
				margin-bottom: 20px;
				background: var(--theme-gradient-title);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			.title-divider {
				height: 2px;
				width: 100px;
				background: var(--theme-gradient-title);
				margin: 20px auto;
				border-radius: 1px;
			}

			p {
				font-size: 1.2rem;
				color: var(--theme-content-text-muted);
				line-height: 1.6;
			}
		}
	}

	.main-content {
		background: transparent;
		border-radius: 0;
		min-height: auto;
		padding: 0;
		position: relative;
		z-index: 1;

		.container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 0 20px;
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 60px;
		}
	}

	.consultation-form {
		background: var(--theme-card-bg);
		border-radius: 16px;
		padding: 30px;
		box-shadow: var(--theme-card-shadow);
		border: 1px solid var(--theme-card-border);
		backdrop-filter: var(--backdrop-blur);
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--theme-card-shadow-hover);
		}

		.form-section {
			margin-bottom: 40px;

			h2 {
				font-size: 1.5rem;
				color: var(--theme-accent);
				margin-bottom: 20px;
				font-weight: 600;
				display: flex;
				align-items: center;
				gap: 10px;
			}
		}

		.form-group {
			margin-bottom: 25px;

			label {
				display: block;
				font-weight: 500;
				color: var(--theme-content-text);
				margin-bottom: 8px;
				font-size: 0.95rem;
			}

			select,
			input,
			textarea {
				width: 100%;
				padding: 12px 16px;
				border: 1px solid var(--theme-input-border);
				border-radius: 8px;
				background: var(--theme-input-bg);
				color: var(--theme-input-text);
				font-size: 16px;
				transition: all 0.3s ease;
				font-family: inherit;

				&:focus {
					outline: none;
					border-color: var(--theme-accent);
					box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
				}

				&::placeholder {
					color: var(--theme-input-placeholder);
				}
			}
		}

		.message-area {
			margin-bottom: 20px;

			.error-message,
			.success-message {
				padding: 12px 16px;
				border-radius: 8px;
				font-size: 14px;
				font-weight: 500;
				margin-bottom: 0;
			}

			.error-message {
				background: var(--theme-error-bg);
				color: var(--theme-error-text);
				border: 1px solid var(--theme-error-border);
			}

			.success-message {
				background: var(--theme-success-bg);
				color: var(--theme-success-text);
				border: 1px solid var(--theme-success-border);
			}
		}

		.form-actions {
			display: flex;
			gap: 15px;
			justify-content: flex-end;
			margin-top: 40px;

			button {
				padding: 12px 30px;
				border-radius: 8px;
				font-weight: 600;
				font-size: 16px;
				cursor: pointer;
				transition: all 0.3s ease;
				border: none;
				display: flex;
				align-items: center;
				gap: 8px;
				min-width: 120px;
				justify-content: center;

				&:disabled {
					opacity: 0.6;
					cursor: not-allowed;
				}

				&.submit-btn {
					background: var(--theme-gradient-primary);
					color: white;

					&:hover:not(:disabled) {
						transform: translateY(-2px);
						box-shadow: var(--theme-button-shadow-hover);
					}

					.loading-spinner {
						width: 16px;
						height: 16px;
						border: 2px solid rgba(255, 255, 255, 0.3);
						border-top: 2px solid white;
						border-radius: 50%;
						animation: spin 1s linear infinite;
					}
				}

				&.reset-btn {
					color: var(--theme-content-text);
					border: 1px solid var(--theme-content-border);
					background: transparent;

					&:hover {
						background: var(--theme-button-secondary-bg-hover);
					}
				}

				&.back-btn {
					background: var(--theme-accent);
					color: white;

					&:hover {
						opacity: 0.9;
						transform: translateY(-2px);
					}
				}
			}
		}
	}

	.service-tips {
		background: var(--theme-card-bg);
		border-radius: 16px;
		padding: 30px;
		box-shadow: var(--theme-card-shadow);
		border: 1px solid var(--theme-card-border);
		backdrop-filter: var(--backdrop-blur);
		height: fit-content;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--theme-card-shadow-hover);
		}

		h3 {
			color: var(--theme-accent);
			font-size: 1.3rem;
			margin-bottom: 20px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		ul {
			list-style: none;
			padding: 0;

			li {
				position: relative;
				padding-left: 25px;
				margin-bottom: 15px;
				color: var(--theme-content-text);
				line-height: 1.6;

				&::before {
					content: '✓';
					position: absolute;
					left: 0;
					color: var(--theme-accent);
					font-weight: bold;
				}
			}
		}
	}
}

// ===============================
// 动画定义
// ===============================

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

// ===============================
// 响应式设计
// ===============================

@media (max-width: 1024px) {
	.service-consulting {
		.main-content .container {
			grid-template-columns: 1fr;
			gap: 40px;
		}
	}
}

@media (max-width: 768px) {
	.service-consulting {
		.hero .hero-content h1 {
			font-size: 2rem;
		}

		.consultation-form {
			padding: 30px 20px;

			.form-actions {
				flex-direction: column;
				align-items: stretch;

				button {
					width: 100%;
				}
			}
		}
	}
}
